<script setup>
import { onMounted, ref } from 'vue'
import { getCameraList } from '@/service/processcontrol'
import { ElMessage } from 'element-plus'
import videoFlv from './VideoFlv.vue'
const livedata = ref([])
let deptObj = window._info || {} //另一个项目传过来的数据
const infoData = window._deptObj || {}
const props = defineProps({
  isError: {
    type: Boolean,
    default: false
  }
})
// 获取直播监控画面
const getList = () => {
  if (infoData && Object.keys(infoData).length > 0) {
    let params = {
      TenantID: infoData.TenantID, //租户编号
      OrgId: infoData.OrgId, //机构编号
      DeptCode: infoData.DeptCode, //项目编号
      DeviceID: infoData.WBCode //磅台编号
    }
    getCameraList(params)
      .then((res) => {
        if (res.ResultCode === 105) {
          livedata.value = res.Info || []
        }
      })
      .catch((err) => {
        ElMessage.error(err)
      })
  }
}
onMounted(() => {
  getList()
})
</script>
<template>
  <div class="live-data">
    <div class="title">
      <img src="../images/liveicon.png" />
      <span class="title-name">过磅实况</span>
    </div>
    <div class="live-box">
      <div class="live-item" v-for="(item, index) in livedata" :key="index">
        <div class="live-name">{{ item.Name }}</div>
        <div class="live-review" v-if="item.LiveURI !== null">
          <videoFlv
            :index="`${infoData.WBCode}${index}`"
            :url="item.LiveURI"
            :isError="props.isError"
          ></videoFlv>
        </div>
        <div class="no-live" v-else>
          <div class="img-box">
            <img src="../images/nolive.png" />
            <div>暂无监控画面</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.live-data {
  width: 710px;
  height: 100%;
  .title {
    width: 100%;
    height: 50px;
    background-color: #2c324d;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    img {
      width: 24px;
      height: 24px;
      margin-right: 5px;
      margin-top: 5px;
    }
    .title-name {
      font-size: 24px;
      font-weight: bold;
      color: #989eba;
    }
  }
  .live-box {
    width: 100%;
    height: calc(100% - 61px);
    background-color: #2c324d;
    padding: 15px 10px;
    .live-item {
      width: 100%;
      height: 100%;
      position: relative;
      display: inline-block;
      width: 50%;
      height: 50%;
      vertical-align: middle;
      .live-name {
        min-width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #165dff;
        font-size: 12px;
        color: #fff;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3;
      }
      .live-review {
        width: 100%;
        height: 100%;
        background: black;
      }
      .no-live {
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #373e5b, #1b2133);
        .img-box {
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          color: #626887;
          img {
            width: 131px;
            height: 96px;
          }
        }
      }
    }
  }
}
</style>
